<template>
    <template v-if='params != null'>
        <a-table :pagination='false' :dataSource='dataSource' :columns='columns'></a-table>
    </template>
    <template v-else>
        <a-skeleton active />
    </template>
</template>

<script lang='ts' setup>
    import { computed } from 'vue'

    const props = withDefaults(defineProps<{params : any}>(), {
        params : null
    })

    const columns = [
        {title : '年份', dataIndex : 'year'}
    ]
    for(let i = 1; i <= 12; i ++) {
        columns.push({title : `${i}月`, dataIndex : String(i)})
    }

    const dataSource = computed(() => {
        const years = Object.keys(props.params)
        years.sort()

        const rows:any[] = []
        years.forEach(year => {
            let row:any = {year : year}
            props.params[year].forEach(item => {
                row[String(item[0])] = item[1]
                rows.push(row)
            })
        })

        return rows

    })
</script>
